<template>
  <div>
    <div class="page-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a @click="$router.go(-1)">角色授权</a></el-breadcrumb-item>
        <el-breadcrumb-item>编辑授权</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-content">
      <div class="form-content">
        <el-form :model="planForm" @submit.native.prevent="handleSubmit">
          <el-form-item>
            <el-tree v-model="planForm.checkedContent" :data="checkItem" :default-checked-keys="nodeIdList" :props="treeProps" show-checkbox node-key="id" ref="tree" highlight-current></el-tree>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">确定</el-button>
            &nbsp;
            <a @click="$router.go(-1)">
              <el-button native-type="button">取消</el-button>
            </a>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
    import {getNavigations,getNavigationBysysrole,updateNavigationByRole} from "@/api/module/roleAuthorize";
    export default {
        data () {
            return {
                planForm: {
                    sysrole: '',
                    roles:[]
                },
                treeProps:{
                  label:"name",
                  children:"child",
                },
                checkItem: [],
                companyLoading: false,
                nodeIdList: []
            }
        },
        methods: {

            CheckContentsTree () {
                getNavigations().then((res) => {
                    this.checkItem = res.data.data
                    this.getCheckContent()
                });
            },
            getCheckContent () {
                const sysrole = this.$route.params.id
                getNavigationBysysrole(sysrole).then((res) => {
                    let a = []
                    for(let i=0;i<res.data.data.length;i++){
                        a.push(res.data.data[i])
                    }
                    this.nodeIdList = a
                }).catch((err) => {
                    this.$message.error(err.message)
                })
            },
            // 提交计划
            handleSubmit () {
                this.checkFilterParams()
                this.$confirm('确定修改权限?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateNavigationByRole(this.planForm).then( () => {
                        this.$router.go(-1) //返回上一url
                    }).catch((err) => {
                        this.$message.error(err.message)
                    })
                }).catch(() => {

                })
            },
            //对数据进行包装，满足后端要求
            checkFilterParams () {
                let item = []
                const sysrole = this.$route.params.id
                this.planForm.sysrole=sysrole
                let value = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
                for(var j=0;j<value.length;j++){
                    item.push(value[j])
                }
                this.planForm.roles = item
            },
        },
        mounted () {
            this.CheckContentsTree();
        }
    }
</script>
